<template>
	<view>
		<!-- 头部信息栏 -->
		<view class="flex align-center border-bottom border-light-secondary px-2 pb-2">
			<image src="/static/default.jpg" class="rounded-circle mr-2"
			style="height: 180rpx;width: 180rpx;"></image>
			<view class="flex flex-column align-center pl-5" style="width: 410rpx;">
				<view class="flex w-100">
					<view class="flex flex-1 flex-column align-center">
						<view class="font-weight-bold">1</view>
						<view class="">获赞</view>
					</view>
					<view class="flex flex-1 flex-column align-center">
						<view class="font-weight-bold">1</view>
						<view class="">关注</view>
					</view>
					<view class="flex flex-1 flex-column align-center">
						<view class="font-weight-bold">1</view>
						<view class="">粉丝</view>
					</view>
				</view>
				<view class="w-100 mt-2">
					<button type="default" class="bg-main text-white flex align-center justify-center" 
					style="color: white;height: 60rpx;">
						关注</button>
				</view>
			</view>
		</view>
		<!-- 选项卡部分 -->
		<view class="flex align-center" style="height: 100rpx;">
			<text 
			v-for="(item,index) in tab"
			:key="index"
			class="flex-1 flex align-center justify-center"
			@click="tabClick(index)"
			:class="tabIndex === index ? 'font-lg text-main font-weight-bold' : 'font-md'"
			>
				{{item.name}}<text class="ml-1" v-if="item.num">{{item.num}}</text>
			</text>
		</view>
		<!-- 内容部分 -->
		<template v-if="tabIndex === 0">
			<view class="animated fadeIn fast">
				<view class="px-5 border-bottom">
					<view class="font-md my-2">账号信息</view>
					<view class="my-1">账号年龄:12天</view>
					<view class="my-1">账号id:1</view>
				</view>
				<view class="px-5">
					<view class="font-md my-2">个人信息</view>
					<view class="my-1">星座:狮子座</view>
					<view class="my-1">职业:IT</view>
					<view class="my-1">国籍:中国</view>
					<view class="my-1">情感:已婚</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="animated fadeIn fast">
				<block v-for="(item,index) in list" :key='index'>
					<common-list :item="item" :index="index" @follow="follow" @doSupport="doSupport"
					></common-list>
					<divider></divider>
				</block>
				<loadMore :loadmore='loadmore'></loadMore>
			</view>
		</template>
		<!-- 弹出层 -->
		<uni-popup ref='popup' type="top">
			<view class="flex justify-center m-2 font-md align-center border-bottom py-2" 
			hover-class="bg-light">
				<text class="iconfont icon-shanchu font-md mr-2"></text>
				加入黑名单
			</view>
			<view class="flex justify-center m-2 font-md align-center py-2" hover-class="bg-light">
				<text class="iconfont icon-xiaoxi font-md mr-2"></text>
				聊天
			</view>
		</uni-popup>
	</view>
</template>

<script>
	let demo = [{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:false,
					title:"正文标题1",
					titlepic:"/static/demo/datapic/11.jpg",
					support:{
						type:'support',
						support_count:1,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				},{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:false,
					title:"正文标题2",
					titlepic:"",
					support:{
						type:'unsupport',
						support_count:2,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				},{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:false,
					title:"正文标题3",
					titlepic:"",
					support:{
						type:'',
						support_count:1,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				},{
					username:'昵称',
					userpic:'/static/default.jpg',
					newstime:'2019-07-07 下午2:00',
					isFollow:false,
					title:"正文标题3",
					titlepic:"",
					support:{
						type:'',
						support_count:1,
						unsupport_count:1,
					},
					comment_count:3,
					share_num:2
				}];
	import commonList from '@/components/common/common-list.vue';
	import loadMore from '@/components/common/loadmore.vue';
	// 引入弹出层组件
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	export default {
		components:{commonList,loadMore,uniPopup},
		data() {
			return {
				tab:[{
					name:'主页'
				},{
					name:'帖子',
					list: demo,
					loadmore: '上拉加载更多'
				},{
					name:'动态',
					list: demo,
					loadmore: '上拉加载更多'
				}],
				tabIndex: 0
			}
		},
		computed:{
			list() {
				return this.tab[this.tabIndex].list
			},
			loadmore() {
				return this.tab[this.tabIndex].loadmore
			}
		},
		onNavigationBarButtonTap() {
			// 打开弹出层
			this.$refs.popup.open();
		},
		methods:{
			tabClick(index) {
				this.tabIndex = index
			},
			// 关注用户
			follow(index) {
				this.tab[this.tabIndex].list[index].isFollow = true
				uni.showToast({
					title:'关注成功'
				})
			},
			// 支持或点踩
			doSupport(e) {
				let item = this.tab[this.tabIndex].list[e.index]
				if (item.support.type === e.type) {
					return uni.showToast({
						title:'您已经操作过了，不能重复',
						icon:'none'
					})
				}
				let msg = e.type == 'support' ? '顶  + 1' : '踩  + 1'
				// 之前没有操作过
				if (item.support.type === '') {
					item.support[e.type+'_count'] ++
				} else if (item.support.type === 'support' && e.type === 'unsupport') {
					// 之前是支持 现在点反对
					item.support.unsupport_count ++
					item.support.support_count --
				} else if (item.support.type === 'unsupport' && e.type === 'support') {
					// 之前是反对 选择点支持
					item.support.unsupport_count --
					item.support.support_count ++
				}
				if (item.support.type === e.type) return
				item.support.type = e.type
				uni.showToast({
					title:msg
				})
			},
		}
	}
</script>

<style>
</style>
